<template>
  <view class="detail-container">
    <!-- 图片展示区 -->
    <swiper class="image-swiper" circular indicator-dots>
      <swiper-item v-for="(img,index) in detail.images" :key="index">
        <image 
          :src="img.url" 
          mode="aspectFill"
          @click="previewImage(index)"
          :lazy-load="true"
          class="detail-image"
        />
        <text class="image-time">{{ img.createTime }}</text>
      </swiper-item>
    </swiper>

    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="info-item">
        <uni-icons type="notification" size="18" color="#666" />
        <text class="info-title">报警时间：{{ detail.time }}</text>
      </view>
      <view class="info-item">
        <uni-icons type="settings" size="18" color="#666" />
        <text class="info-title">设备型号：{{ detail.deviceModel }}</text>
      </view>
      <view class="info-item">
        <uni-icons type="flag" size="18" color="#666" />
        <text class="info-title">错误代码：{{ detail.errorCode }}</text>
      </view>
    </view>

    <!-- 原因分析 -->
    <view class="section-box">
      <view class="section-title">
        <text>可能原因分析</text>
        <view class="status-tag error">紧急</view>
      </view>
      <view class="reason-list">
        <text v-for="(reason,index) in detail.reasons" :key="index">
          {{ index+1 }}. {{ reason }}
        </text>
      </view>
    </view>

    <!-- 处理步骤 -->
    <view class="section-box">
      <view class="section-title">
        <text>推荐处理步骤</text>
        <uni-icons type="help" size="18" color="#007AFF" />
      </view>
      <view class="step-list">
        <view v-for="(step,index) in detail.steps" :key="index" class="step-item">
          <text class="step-num">{{ index+1 }}</text>
          <text>{{ step }}</text>
        </view>
      </view>
      <button class="confirm-btn" @click="handleConfirm">标记为已处理</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 使用ref直接绑定数据[9,11](@ref)
const detail = ref({
  time: '2025-04-17 14:30:45',
  deviceModel: 'UONI V2 Pro',
  errorCode: 'E02',
  images: [
    { 
      url: '/static/error/e02-1.jpg',
      createTime: '14:30:45' 
    },
    {
      url: '/static/error/e02-2.jpg',
      createTime: '14:30:48'
    }
  ],
  reasons: [
    '滚刷被毛发缠绕（参考网页1）',
    '驱动轮卡入异物（参考网页4）',
    '碰撞传感器异常（参考网页4）'
  ],
  steps: [
    '关闭电源并翻转设备',
    '取出滚刷清理缠绕物（参考网页1）',
    '检查驱动轮是否卡入异物',
    '擦拭底部红外传感器（参考网页1）',
    '重启设备观察是否正常'
  ]
})

// 图片预览功能[6,8](@ref)
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: detail.value.images.map(item => item.url),
    indicator: 'number'
  })
}

// 确认处理操作
const handleConfirm = () => {
  uni.showToast({ title: '状态已更新' })
}
</script>

<style lang="scss">
.detail-container {
  background: #f8f9fa;
  min-height: 100vh;
  
  .image-swiper {
    height: 500rpx;
    position: relative;
    
    .detail-image {
      width: 100%;
      height: 100%;
    }
    
    .image-time {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      background: rgba(0,0,0,0.5);
      color: #fff;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
    }
  }

  .info-card {
    background: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 24rpx;
    
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .info-title {
        margin-left: 16rpx;
        font-size: 28rpx;
      }
    }
  }

  .section-box {
    background: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 24rpx;
    
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      font-size: 32rpx;
      font-weight: bold;
      
      .status-tag {
        padding: 8rpx 24rpx;
        border-radius: 8rpx;
        &.error { background: #ffe3e3; color: #ff3b30; }
      }
    }
    
    .reason-list text {
      display: block;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .step-list {
      .step-item {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        
        .step-num {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: #007AFF;
          color: #fff;
          text-align: center;
          line-height: 40rpx;
          margin-right: 16rpx;
        }
      }
    }
    
    .confirm-btn {
      background: #007AFF;
      color: #fff;
      margin-top: 48rpx;
      border-radius: 99rpx;
    }
  }
}
</style>